<template>
	<!-- 页面的主要内容容器 -->
	<view class="content">
		<!-- 用于滚动显示问题的区域，使用 scroll-view 组件 -->
		<scroll-view class="question">
			<!-- 使用 v-for 遍历 historys 数组生成对话记录项，根据 item.role 是否为 'user' 应用不同的类 -->
			<view class="item" :class="{reverse :item.role!='user'}" v-for="(item,index) in historys">
				<!-- 显示对话内容 -->
				<text class="text">{{item.content}}</text>
				<!-- 根据 item.role 显示不同的图标，用户是 'person'，其他是 'chatboxes' -->
				<uni-icons :type="item.role=='user'?'person':'chatboxes'" size="25" color="whitesmoke"></uni-icons>
			</view>
		</scroll-view>
		<!-- 提问输入区域 -->
		<view class="word">
			<!-- 输入框，使用 uni-easyinput 组件，双向绑定 word 数据 -->
			<uni-easyinput class="input" v-model="word" placeholder="请输入内容" />
			<!-- 提问按钮，点击触发 doQuestion 函数 -->
			<view class="btn" @tap="doQuestion">提问</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		CONFIG
	} from '../../utils/config';

	// 在页面加载时调用 doQuestion 函数
	onLoad(() => {
		doQuestion();
	});

	// 存储用户输入的文本，使用 ref 创建响应式引用
	const word = ref("");
	// 存储对话历史记录，使用 ref 创建响应式数组
	const historys = ref([]);
	// 提问模型对象，包含模型名称、消息数组和温度参数
	const model = {
		"model": "moonshot-v1-8k",
		"messages": [],
		"temperature": 0.3
	};

	// 向 kimi 提问的异步函数
	async function doQuestion() {
		// 如果输入框为空，显示提示信息
		if (word.value == "") {
			uni.showToast({
				title: "请输入提问内容！",
				icon: 'none'
			});
		} else {
			// 将用户的提问添加到 historys 数组
			historys.value.push({
				"role": "user",
				"content": word.value
			});
			// 更新模型的 messages 数组
			model.messages = historys.value;
			// 发送 POST 请求到配置的 kimi_url 进行提问
			let res = await uni.$post(CONFIG.kimi_url + "/v1/chat/completions", model);
			console.log(res.choices[0].message);
			// 将回答添加到 historys 数组
			historys.value.push(res.choices[0].message);
			// 清空输入框
			word.value = "";
		}
	}
</script>

<style lang="scss" scoped>
	// 页面内容的整体样式，设置背景图片、大小和位置
	.content {
		background-image: url(/static/image/Aibeijing.png);
		background-size: 100% 100%;
		height: calc(100vh - 97px);
		position: relative;

		// 问题滚动区域的样式，设置高度和颜色
		.question {
			height: calc(100vh - 97px - 45px);
			color: white;

			// 对话记录项的样式，使用 flex 布局，设置宽度和上边距
			.item {
				display: flex;
				width: 730rpx;
				margin-top: 5px;
				justify-content: end;

				// 对话内容的文本样式，设置边框、圆角、内边距和字体大小
				.text {
					border: 1px solid #ccc;
					border-radius: 5px;
					padding: 5px;
					font-size: 14px;
				}
			}

			// 当类为 reverse 时，使用 row-reverse 布局
			.reverse {
				flex-direction: row-reverse;
			}
		}

		// 提问输入区域的样式，设置位置、宽度、高度和布局
		.word {
			position: absolute;
			bottom: 0;
			width: 720rpx;
			height: 85rpx;
			display: flex;
			align-items: center;
			padding: 0 5px;

			// 提问按钮的样式，设置颜色、背景颜色、边框、圆角、宽度、文本对齐和光标样式
			.btn {
				color: whitesmoke;
				background-color: #ccc;
				height: 35px;
				border: 1px solid #ccc;
				border-radius: 5px;
				width: 100px;
				text-align: center;
				line-height: 35px;
				margin-left: 5px;
				cursor: pointer;
			}
		}
	}
</style>